<!DOCTYPE html><head><meta charset="utf-8"><style>.container {
    width: 80%;
    margin: auto;
}

form {
    border: 1px solid grey;
    padding: 20px;
    width: 50%;
}

img {
    max-width: 95%;
}

.center {
    display: table;
    margin: auto;
}

.col-lg-1 {
    width: 10%;
    float: left;
}

.col-lg-6 {
    width: 50%;
    float: left;
}

.row {
    clear: both;
}

.element01 {
    width: 100%;
}

.element02 {
    color: #00f;
    background-color: #ddd;
}

.element03 {
    color: #00f;
}

.element04 {
    background-color: #ddd;
}

.element05 {
    border: 2px dotted #00f;
}

.element06 {
    border: none;
}

.element07 {
    font-family: "Courier New", Courier;
}

.element08 {
    width: 4em;
    height: 4em;
}

.element09 {
    font-size: 0.5em;
}

.element10 {
    font-weight: bold;
}

.element11 {
    padding: 1em;
}

.element12 {
    margin: 1em;
}

.element13 {
    text-align: right;
}

.ra1 input[type='radio'] {
    vertical-align: middle;
    position: relative;
    bottom: 2px;
}

select {
    width: 50%;
    height: 34px;
}</style></head><body><div class="container"><div class="row"><div class="col-lg-1"><button data="label" class="btn selectEle">Label</button></div><div class="col-lg-1"><button data="input" class="btn selectEle">Input</button></div><div class="col-lg-1"><button data="button" class="btn selectEle">Button</button></div><div class="col-lg-1"><button data="checkbox" class="btn selectEle">Checkbox</button></div><div class="col-lg-1"><button data="radio" class="btn selectEle">Radio</button></div><div class="col-lg-1"><button data="select" class="btn selectEle">Select</button></div></div><div class="row"><form class="center"><h2>Radio几种样式集合。</h2><h3>当前浏览器:</h3><label><input class='element01' type='radio' name='radiogroup' /> element01 : width:100%;</label><br><label><input class='element02' type='radio' name='radiogroup' /> element02 : color:blue;background-color: #ddd;</label><br><label><input class='element03' type='radio' name='radiogroup' /> element03 : color:#00f;</label><br><label><input class='element04' type='radio' name='radiogroup' /> element04 : background-color: #ddd;</label><br><label><input class='element05' type='radio' name='radiogroup' /> element05 : border: 2px dotted #00f;</label><br><label><input class='element06' type='radio' name='radiogroup' /> element06 : border: none;</label><br><label><input class='element07' type='radio' name='radiogroup' /> element07 : font-family: "Courier New", Courier;</label><br><label><input class='element08' type='radio' name='radiogroup' /> width:4em; height:4em;</label><br><label><input class='element09' type='radio' name='radiogroup' /> element09 : font-size: 0.5em;</label><br><label><input class='element10' type='radio' name='radiogroup' /> element10 : font-weight: bold;</label><br><label><input class='element11' type='radio' name='radiogroup' /> element11 : padding: 1em;</label><br><label><input class='element12' type='radio' name='radiogroup' /> element12 : margin: 1em;</label><br><label><input class='element13' type='radio' name='radiogroup' /> element13 : text-align: right;</label><br><label class="ra1"><input class='element13' type='radio' name='radiogroup' /> ra1 : vertical test 垂直对齐;</label></form></div><br><br><br><div class="row"><div class="col-lg-6"><div class="dropdown-left"><select><option value="chrome40">chrome 40</option><option value="firefox36">firefox 36</option><option value="opera28">opera 28</option><option value="ie7">ie 7</option><option value="ie8">ie 8</option><option value="ie9">ie 9</option><option value="ie10">ie 10</option><option value="ie11">ie 11</option></select><div class="content"><p>chrome 40:</p><img src="img/radio/chrome40.png"></div></div></div><div class="col-lg-6 center"><div class="dropdown-right"><select><option value="chrome40">chrome 40</option><option value="firefox36">firefox 36</option><option value="opera28">opera 28</option><option value="ie7">ie 7</option><option value="ie8">ie 8</option><option value="ie9">ie 9</option><option value="ie10">ie 10</option><option value="ie11">ie 11</option></select><div class="content"><p>chrome 40:</p><img src="img/radio/chrome40.png"></div></div></div></div></div><script src="../bower_components/jquery/dist/jquery.js"></script><script>$('select').on('change', function () {
    var name = $(this).find("option:selected").val();
    var $content = $('.content', $(this).parent())
    $('p', $content).html(name);
    $('img', $content).attr('src', 'img/radio/' + name + '.png');
})

$('.selectEle').on('click', function () {
    var name = $(this).attr('data');
    location.href = location.href.substring(0, location.href.lastIndexOf("/") + 1) + name + ".html";
})</script></body>